<!-- NotificationCenter.vue -->
<template>
  <div class="info-card notification-card">
    <h3>通知中心</h3>

    <!-- 作业通知 -->
    <div class="notification-item" v-if="userRole === 'student'">
      <div class="clickable-notification" @click="$emit('show-assignments')">
        <div class="notification-detail">
          您有 <span class="highlight-number">{{ pendingAssignmentsCount }}</span> 个待提交的作业
          <span class="click-hint">点击查看详情 ></span>
        </div>
      </div>
    </div>

    <!-- 未读通知列表 -->
    <div class="notification-stats" v-if="unreadStats">
      <div class="stats-item">
        总未读: <span class="highlight-number">{{ unreadStats.total }}</span>
        <div class="type-stats">
          <span class="type-item">课程相关: {{ unreadStats.by_type.course || 0 }}</span>
          <span class="type-item">提到我的: {{ unreadStats.by_type.mention || 0 }}</span>
        </div>
      </div>
    </div>

    <!-- 通知列表 -->
     <div class="notification-list-container">
      <div class="notification-list">
        <div
          v-for="notification in notifications"
          :key="notification.id"
          class="notification-item"
          :class="{ 'unread': !notification.is_read }"
          @click="viewNotificationDetail(notification.id)"
        >
          <div class="notification-content">
            <span class="notification-type">{{ getNotificationType(notification.type) }}</span>
            {{ notification.content }}
          </div>
          <div class="notification-time">{{ formatTime(notification.created_at) }}</div>
          <span class="click-hint">点击查看详情 ></span>
        </div>
      </div>
    </div>

 <!-- 通知详情弹窗 -->
    <div class="notification-dialog" v-if="showDetailDialog" @click.self="closeDialog">
      <div class="dialog-content">
        <div class="dialog-header">
          <h4>通知详情</h4>
          <button class="close-button" @click="closeDialog">&times;</button>
        </div>
        <div class="dialog-body" v-if="currentNotification">
          <div class="detail-type">
            {{ getNotificationType(currentNotification.type) }}
          </div>
          <div class="detail-content">
            {{ currentNotification.content }}
          </div>
          <div class="detail-meta">
            <div class="detail-user" v-if="currentNotification.user">
              来自: {{ currentNotification.user.username }}
            </div>
            <div class="detail-time">
              {{ formatTime(currentNotification.created_at) }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotificationCenter',
  props: {
    userRole: {
      type: String,
      required: true
    },
    pendingAssignmentsCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      notifications: [],
      unreadStats: null,
       showDetailDialog: false,
      currentNotification: null
    }
  },
  methods: {
    async fetchUnreadNotifications() {
      try {
        const response = await fetch('/backend/api/post/notifications/unread/');
        const data = await response.json();
        this.notifications = data.notifications;
        this.unreadStats = data.unread_stats;
      } catch (error) {
        console.error('获取未读通知失败:', error);
      }
    },
     async viewNotificationDetail(notificationId) {
      try {
        const response = await fetch(`/backend/api/post/notifications/${notificationId}/`);
        const data = await response.json();
        this.currentNotification = data;
        this.showDetailDialog = true;
        // 更新本地通知列表中的已读状态
        const index = this.notifications.findIndex(n => n.id === notificationId);
        if (index !== -1) {
          this.notifications[index].is_read = true;
        }
      } catch (error) {
        console.error('获取通知详情失败:', error);
      }
    },
    closeDialog() {
      this.showDetailDialog = false;
      this.currentNotification = null;
    },
    getNotificationType(type) {
      const types = {
        'course': '课程',
        'mention': '@我的'
      };
      return types[type] || type;
    },
    formatTime(timeString) {
      const date = new Date(timeString);
      return date.toLocaleDateString('zh-CN', {
        month: 'numeric',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  },
  mounted() {
    this.fetchUnreadNotifications();
  }
}
</script>

<style scoped>
.info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 18px;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
}

.notification-stats {
  margin: 15px 0;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
}

.stats-item {
  font-size: 14px;
  color: #606266;
}

.type-stats {
  margin-top: 5px;
  font-size: 12px;
}

.type-item {
  margin-right: 15px;
  color: #909399;
}
.notification-list-container {
  max-height: 500px; /* 限制容器高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.notification-list {
  margin-top: 15px;
  padding-right: 10px; /* 为滚动条留出空间 */
}

/* 自定义滚动条样式 */
.notification-list-container::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.notification-list-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道背景色 */
  border-radius: 4px;
}

.notification-list-container::-webkit-scrollbar-thumb {
  background: #909399; /* 滚动条滑块颜色 */
  border-radius: 4px;
}

.notification-list-container::-webkit-scrollbar-thumb:hover {
  background: #606266; /* 鼠标悬停时的滑块颜色 */
}
.notification-item {
  padding: 12px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
  transition: all 0.3s ease;
}

.notification-item:hover {
  background-color: #f5f7fa;
}

.notification-item.unread {
  background-color: #f0f9ff;
}

.notification-content {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
}

.notification-type {
  color: #409EFF;
  font-size: 12px;
  margin-right: 8px;
  padding: 2px 6px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.notification-time {
  font-size: 12px;
  color: #909399;
}

.highlight-number {
  color: #409EFF;
  font-weight: bold;
  font-size: 16px;
}

.click-hint {
  float: right;
  color: #909399;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.notification-item:hover .click-hint {
  opacity: 1;
}

.unread .notification-content {
  font-weight: 500;
}

/* 添加弹窗相关样式 */
.notification-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.dialog-header {
  padding: 15px 20px;
  border-bottom: 1px solid #EBEEF5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.close-button {
  border: none;
  background: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-button:hover {
  color: #303133;
}

.dialog-body {
  padding: 20px;
}

.detail-type {
  display: inline-block;
  color: #409EFF;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 2px 8px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 4px;
}

.detail-content {
  font-size: 16px;
  color: #303133;
  line-height: 1.6;
  margin-bottom: 20px;
}

.detail-meta {
  font-size: 14px;
  color: #909399;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-user {
  color: #606266;
}

/* 动画效果 */
.notification-dialog {
  animation: fadeIn 0.2s ease;
}

.dialog-content {
  animation: slideIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
</style>